 <template>
  <div class="margin">
    <ul class="headerbar">
      <li>
        <router-link to="/typess">
          <span class="iconfont icon-icon04"></span>
        </router-link>
      </li>
      <li><img src="../../assets/images/m_hualogo.png"
             alt=""
             class="logo1"></li>
      <li>
        <span class="iconfont icon-sevice"></span>
      </li>
    </ul>


    <swiper :options="swiperOption" ref="mySwiper" v-if='lunbo.length>0'>
      <!-- 轮播块 -->
      <swiper-slide v-for="(item,index) in lunbo" :key="index"><router-link to=""><img :src="item.pic1" alt=""></router-link></swiper-slide>

      <div class="swiper-pagination"
           slot="pagination"></div>
    </swiper>



    <div class="swiper-down">
      <div class="swiper-down-item swiper-down-item1">
        <i class="iconfont icon-dagou-copy"></i>
        <span>认证龙头企业</span>
      </div>
      <div class="swiper-down-item">
        <i class="iconfont icon-dagou-copy"></i>
        <span>15年品牌</span>
      </div>
      <div class="swiper-down-item">
        <i class="iconfont icon-dagou-copy"></i>
        <span>3小时送花</span>
      </div>
      <div class="swiper-down-item">
        <i class="iconfont icon-dagou-copy"></i>
        <span>最近
          <router-link to="">444444</router-link>
          条好评
        </span>
      </div>
    </div>
    <div class="procate">
      <div class="procate-item" v-for="(item ,index) in list">
        <router-link :to="'/detailss/'+item.id+'/'+item.name" :title="item.name"><img :src="item.img"
               alt="">
          <p>{{item.name}}</p>
        </router-link>
      </div>
    </div>

    <div class="div-section">
      <div class="modetitle">一秒选花</div>
      <div class="scene-list">
        <div class="scene-list-item">
          <router-link to="">
            <img src="../../assets/images/lover1.png"
                 alt="">
            <span>送恋人</span>
          </router-link>
        </div>
        <div class="scene-list-item">
          <router-link to="">
            <img src="../../assets/images/lover2.png"
                 alt="">
            <span>送家人</span>
          </router-link>
        </div>
        <div class="scene-list-item">
          <router-link to="">
            <img src="../../assets/images/lover3.png"
                 alt="">
            <span>送朋友</span>
          </router-link>
        </div>
      </div>
      <div>
        <ul class="scene2-list">
          <li class="scene2-list-item">
            <router-link to="">
              <img src="../../assets/images/birthday1.png"
                   class="scene2-list-radius"
                   alt="">
              <span>生日祝福</span>
            </router-link>
          </li>
          <li class="scene2-list-item">
            <router-link to="">
              <img src="../../assets/images/birthday2.png"
                   class="scene2-list-radius"
                   alt="">
              <span>表白求婚</span>
            </router-link>
          </li>
          <li class="scene2-list-item">
            <router-link to="">
              <img src="../../assets/images/birthday3.png"
                   class="scene2-list-radius"
                   alt="">
              <span>开业商务</span>
            </router-link>
          </li>
          <li class="scene2-list-item">
            <router-link to="">
              <img src="../../assets/images/birthday4.png"
                   class="scene2-list-radius"
                   alt="">
              <span>周年纪念</span>
            </router-link>
          </li>
        </ul>
      </div>
      <div class="scene2-list">
        <router-link to=""
                     :class="'list-bg'">
          <p class="scene-item-name">热销榜</p>
          <p class="scene-item-desc">集万千宠爱</p>
          <div class="scene-item-bottom">
            <span class="scene-item-bottom-label">大家都在买</span>
            <span class="scene-item-bottom-text">热销12.6万</span>
          </div>
        </router-link>
        <router-link to=""
                     :class="'list-bg list-bg2'">
          <p class="scene-item-name">特价专区</p>
          <p class="scene-item-desc">超值好货</p>
          <div class="scene-item-bottom">
            <span class="scene-item-bottom-label">限时直降</span>
            <span class="scene-item-bottom-text">￥15.8
              <s>￥18.6</s>
            </span>
          </div>
        </router-link>
      </div>
      <div class="scene2-list">
        <div class="scene-list-item">
          <router-link to="">
            <img src="../../assets/images/new1.jpg"
                 alt="">
            <span class="scene-item-pange">新品来袭</span>
          </router-link>
        </div>
        <div class="scene-list-item">
          <router-link to="">
            <img src="../../assets/images/new2.jpg"
                 alt="">
            <span class="scene-item-pange">品味精选</span>
          </router-link>
        </div>
        <div class="scene-list-item">
          <router-link to="">
            <img src="../../assets/images/new3.jpg"
                 alt="">
            <span class="scene-item-pange">设计师臻选</span>
          </router-link>
        </div>
      </div>
    </div>

    <!-- flowers -->
    <div class="flowers">
      <v-flowers :flowers="productList"
                 :lover="lovef"></v-flowers>
    </div>
    <div class="flowers">
      <v-flowers :flowers="grand"
                 :lover="grandLove"></v-flowers>
    </div>
    <!-- 组件 -->
    <div class="child">
      <v-child :a="foreverFlower"
               :pre="light"></v-child>
    </div>

    <div class="child">
      <v-child :a="cake"
               :pre="cakes"></v-child>
    </div>

    <div class="child">
      <v-child :a="present"
               :pre="gift"></v-child>
    </div>

    <!--  -->
    <div class="tuangou">
      <img src="../../assets/images/tuangou.png"
           alt="">
    </div>
    <div class="choose">
      <p class="choose-title">为什么选择我们</p>
      <ul class="advantage">
        <li v-for="(item,index) in adv"
            class="adv-list">
          <img :src="item.pic">
          <p class="adv-txt">{{item.txt}}</p>
        </li>
      </ul>
    </div>
    <div class="foot-box">
      <ul class="foot">
        <li v-for="(item,index) in footList"
            class="foot-item">
          <router-link to="">
            {{item.txt}}
          </router-link>
        </li>
      </ul>
      <div class="foot-link">
        <router-link to="">
          <i class="iconfont icon-iphone-copy"></i>
          <span>客户端</span>
        </router-link>
        <router-link to="">
          <i class="iconfont icon-sevice"></i>
          <span>客服</span>
        </router-link>
      </div>
      <p class="footer-copyright">
        Copyright © 2005~2020 花礼网（中国鲜花礼品网）版权所有
        <br>
        中国鲜花网领先品牌，鲜花速递专家！
        <br>
        深圳市百易信息技术有限公司 粤ICP备09171662号
      </p>
    </div>
  </div>
</template>



<style scoped>

.margin {
  padding-bottom: 3.5rem;
  background: #e9ecf0;
}
.headerbar {
  display: flex;
  height: 51.5px;
  background-color: #435448;
  padding: 0px 20px 0px 20px;
  align-items: center;
  justify-content: space-between;
}
.logo1 {
  width: 163px;
}
.tabbar-item a {
  text-decoration: none;
  color: white;
}

.iconfont {
  font-size: 1.8rem;
  color: white;
}
.icon-icon04 {
  font-size: 24px;
}
/*  */
.swiper-down {
  display: flex;
  font-size: 0.7rem;
  justify-content: space-around;
  background: white;
  padding: 0px 15px 0px 15px;
  height: 2rem;
  line-height: 2rem;
  overflow: hidden;
  text-align: center;
}
.swiper-down-item {
  margin-left: 10px;
}
.swiper-down-item1 {
  margin-left: 0px;
}
.swiper-down-item a {
  color: #435448;
}
.icon-dagou-copy {
  color: black;
  font-size: 0.82rem;
  color: #435448;
}
/*  */
/*-----  */
.procate {
  display: flex;
  justify-content: space-around;
  text-align: center;
  padding: 0.56rem 0rem 0.56rem 0rem;
  background: white;
}
.procate-item {
  width: 25%;
}
.procate-item a {
  display: inline-block;
  text-decoration: none;
  font-size: 50%;
  color: black;
}
.procate-item img {
  /* width: 2.5rem; */
  width: 50%;
}

/*----swiper---- */
.swiper-container {
  width: 100%;
  margin: 0;
  padding: 0;
}

.swiper-wrapper {
  height: auto;
}

.swiper-slide img {
  max-width: 100%;
}

.swiper-slide {
  text-align: center;
  background: #fff;
  /* Center slide text vertically */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}

/*----swiper---- */

/* section */
.div-section {
  padding: 0px 10px 0px 10px;
  padding-bottom: 1.14rem;
  background: white;
}
.modetitle {
  padding: 12px 0px 12px 0px;
  line-height: 1rem;
  height: 1rem;
}
.modetitle:before {
  content: "";
  display: inline-block;
  width: 0.21428571rem;
  height: 1rem;
  background: #435448;
  margin-right: 0.43rem;
}

.scene-list {
  display: flex;
}
.scene-list-item {
  margin: 0px 2px 0px 2px;
  position: relative;
}
.scene-list-item a {
  display: block;
  color: white;
  font-size: 14px;
}
.scene-list-item img {
  width: 100%;
}

.scene-list-item span {
  position: absolute;
  z-index: 3;
  left: 35px;
  bottom: 7px;
}
.scene2-list {
  margin-top: 0.45rem;
  display: flex;
  justify-items: space-around;
}
.scene2-list-item {
  margin: 0px 2px 0px 2px;
  position: relative;
}
.scene2-list-item a {
  display: block;
  color: #232628;
  font-size: 14px;
  text-align: center;
}
.scene2-list-item img {
  width: 100%;
}
.scene2-list-item span {
  position: absolute;
  display: inline-block;
  z-index: 2;
  left: 0px;
  right: 0;
  top: 12px;
}
.scene2-list-radius {
  border-radius: 0.3rem;
}
.list-bg {
  display: block;
  padding: 12px;
  height: 6.5rem;
  width: 100%;
  background: url("../../assets/images/ranklist1.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center center;
  text-decoration: none;
  position: relative;
  border: 1px solid #e9ecf0;
}
.list-bg2 {
  background: url("../../assets/images/ranklist2.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center center;
}

.scene-item-name {
  color: black;
  font-size: 14px;
}
.scene-item-desc {
  font-size: 0.78rem;
  color: #71797f;
}
.scene-item-bottom {
  position: absolute;
  bottom: 15px;
  font-size: 0.7rem;
  display: flex;
  justify-content: space-between;
  width: 93%;
}
.scene-item-bottom-label {
  border-radius: 2rem;
  background: #ff734c;
  color: #fff;
  padding: 0.1rem 0.4rem;
}
.scene-item-bottom-text {
  color: black;
}
.scene-item-bottom-text s {
  color: #b4babf;
}
.scene-item-pange {
  width: 100%;
  background: rgba(35, 38, 40, 0.8);
  font-size: 0.85rem;
  bottom: 0 !important;
  left: 0 !important;
  text-align: center;
}

.tuangou {
  width: 100%;
}
.tuangou img {
  display: block;
  width: 100%;
}

/* adv */
.choose {
  text-align: center;
  background: white;
}
.choose-title {
  padding: 1.4rem 0rem 1.4rem 0rem;
}
.advantage {
  display: flex;
  flex-wrap: wrap;
  font-size: 0.7rem;
}
.adv-list {
  width: 33.33%;
  padding-bottom: 1.7rem;
}

.adv-list img {
  width: 50%;
}
.foot-box {
  background: white;
  font-size: 0.71rem;
  padding: 1.42rem 0rem;
  margin-top: 0.57rem;
}
.foot {
  display: flex;
  flex-wrap: wrap;
  text-align: center;
  width: 100%;
}
.foot-item {
  width: 25%;
  margin-bottom: 1rem;
}
.foot-box .router-link-active {
  display: inline-block;
  text-decoration: none;
  padding: 4px 8px;
  background: #e9ecf0;
  color: black;
  font-size: 0.85rem;
}
.foot-link {
  display: flex;
  justify-content: space-around;
  padding: 0rem 3rem;
}
.foot-link .router-link-active {
  background: white;
  text-align: center;
}
.foot-link i {
  display: block;
  background: #e9ecf0;
  width: 2.57rem;
  height: 2.57rem;
  line-height: 2.57rem;
  border-radius: 50%;
}
.foot-link .iconfont {
  font-size: 1.42rem;
  color: black;
}
.footer-copyright {
  margin-top: 1rem;
  text-align: center;
  color: #b4babf;
}
</style>

<style>
.swiper-pagination-bullet{
  width:6px;
  height: 6px;
  background: white;
  opacity: 1;
  outline: none;
}
.swiper-pagination-bullet-active{
  width: 30px;
  border-radius: 99px;
  height: 6px;
  background: #ff734c;
  border:0px;
  outline: none;

}
</style>



<script>
import vFlowers from '../common/flowers.vue'
import vChild from '../common/child.vue'
import { swiper, swiperSlide } from 'vue-awesome-swiper'

export default {
  name: 'carrousel',
  components: {
    vChild,
    vFlowers,
    swiper,
    swiperSlide
  },
  data () {
    return {
      foreverFlower: [],
      productList: [],
      adv: [],
      footList: [],
      grand: [],
      present: [],
      cake: [],
      lunbo:[],
      lovef: "送恋人爱情之花",
      grandLove: "送长辈鲜花",
      light: "永生花推荐",
      cakes: "蛋糕推荐",
      gift: "礼物推荐",
      swiperOption: {
        // 自动播放
        
        autoplay:{
          delay:3000,
          disableOnInteraction:false// autoplay:true自动播放;false不自动播放
        },
        pagination: {
          el: '.swiper-pagination',
          clickable: true,// 此参数设置为true时，点击分页器的指示点分页器会控制Swiper切换

        },
        //循环
        loop: true,// true循环轮播;false不循环轮播
      
      },

      list:[]
    }

  },
  mounted () {

    // console.log('this is current swiper instance object', this.swiper)
    // this.swiper.slideTo(3, 1000, false);??

    this.$http.get('./data/flower1-details.json').then(res => {
      this.productList = res.data.productList;
      this.adv = res.data.adv;
      this.footList = res.data.footList;
      this.foreverFlower = res.data.forever.forever1;
      this.grand = res.data.grand;
      this.cake = res.data.cake.cake1;
      this.present = res.data.present.present1;
      this.lunbo=res.data.lunbo;
      this.list=res.data.types;
    });
  },
  computed: {
    swiper () {
      return this.$refs.mySwiper.$swiper
    }
  }
  
}
// 解决在vue中使用swiper loop失效的问题:

// 即使是设置了loop：true 还是不能无缝轮播
// 原因： loop设置为true 则开启loop模式。loop模式：会在原本slide前后复制若干个slide(默认一个)并在合适的时候切换，
// 让Swiper看起来是循环的， 可是在vue的v-for中时，异步加载的数据都还没有返回时，就先加载了Swiper组件并复制了sliper
// 解决办法： 利用v-if的属性，v-if=showProduct.length，确保异步加载的数据已经返回后，再加载swiper组件

</script>

